<template>
    <div class=" vue-ms-main" ref="msMain">
        <div class="ms-top">
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <i class="el-icon-menu"></i>    用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="ms-doc">
            <!--  查询条件 -->
            <div class="vue_search ms-title" ref="search">
                <el-form :model="formInline" label-width="78px" class="demo-form-inline" style="margin-left: -9px;">
                    <el-form-item label="开始时间" prop="name">
                        <div style="position: relative;" class="search-time">
                            <b class="md"></b>
                            <el-date-picker
                                v-model="params.startTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                align="right"
                                :picker-options="pickerOptions2">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <div class="el-form-item"><a @click="listseachbtn" class="sm-row3">&nbsp;&nbsp;<el-button type="primary" style="">查 询</el-button></a></div>
                </el-form>
            </div>
            <template :style="dataTable">
                <el-table :data="dataList" :height=heightData   border header-align="center" style="width: 100%">
                    <el-table-column
                        prop="userName"  label="用户名称" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column :formatter="dateFormat"
                        prop="creatTime"  label="添加时间" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        prop="userPhone"  label="联系方式" align="center" min-width="100">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="pagination">
                <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="params.page"   :page-sizes="[10, 20, 30, 40,50]"
                                :page-size="params.size"  layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dataList:[],
                params:{
                    page:1,     //  当前页
                    size:10,    //  每页行数
                    defCityVal: undefined,     // 默认选中城市
                    delCompanyVal:undefined,  // 公司默认选中
                    delRouteVal:undefined,    // 默认选中路线
                    timeData:[],
                    startTime:'',
                    endTime:'',
                },
                heightData: document.body.clientHeight-260,
                dataTable:document.body.clientHeight-260,
            }
        },
        methods: {
            // 编辑
            handleEdit(){

            },
            // 删除
            deleteRow(index){
                console.log(index);
            },
            // 查询
            listseachbtn(){
                this.getDataList();
            },
            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.size = val;        // 分页参数 每页行数 （赋值全局变量）
                this.getDataList();  // 调用公共列表方法
            },
            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.getDataList();     // 调用公共列表方法
            },
            upd(){
                this.$router.push('/userUpd');
            },
            //时间格式化
            dateFormat(row, column) {
                var date = row[column.property];
                var d = date.replace('T',' ');
                if (date == undefined) {
                    return "";
                }else{
                    return d;
                }
            },
            getDataList(){
                var data = [
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    {'userName':'张三', 'creatTime':'20163.06.01','userPhone':'17888211415'},
                    ];
                this.dataList = data;
                this.totalRecord = 20;
            }
        },
        mounted(){
            this.getDataList();
        }
    }
</script>
<style>

</style>
